<!--
 * @Descripttion:
 * @version: V1.0.0
 * @Author: Shuangshuang Song
 * @Date: 2020-06-17 11:20:00
 * @LastEditors: Shuangshuang Song
 * @LastEditTime: 2020-08-03 14:43:37
-->
<template>
  <div class="itemview-searchbar">
    <div class="searchbox">
      <!-- 可以增加查询项 -->
      <slot name="otherSearch" />
      {{ $t('m.weiyou_keyword') }}：
      <el-input
        v-model="keyword"
        @keyup.enter.native="search"
        @clear="search"
        :placeholder="$t('m.weiyou_nametheme')"
        class="keyword-input"
        size="mini"
        clearable
      />
      {{ $t('m.weiyou_date') }}：
      <el-date-picker
        v-model="rangeDate"
        @change="search"
        :start-placeholder="$t('m.weiyou_begingdate')"
        :end-placeholder="$t('m.weiyou_enddate')"
        class="date-input"
        popper-class="datetimerangepopover"
        size="mini"
        type="daterange"
        range-separator="至"
      />
      <!-- 可以添加其他查询项 -->
      <slot name="otherQuery" />
      <!-- 可以添加按钮 -->
      <slot name="searchButton" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'QueryCondition',
  components: { },
  data() {
    return {
      rangeDate: [], // 时间区间查询
      keyword: '', // 关键字查询
    };
  },
  computed: {
    startTime() {
      return this.rangeDate && this.rangeDate[0] ? Ext.Date.format(this.rangeDate[0], 'Y-m-d') : '';
    },
    endTime() {
      return this.rangeDate && this.rangeDate[1] ? Ext.Date.format(this.rangeDate[1], 'Y-m-d') : '';
    },
  },
  mounted() {
    // 增加IE9浏览器类名 处理IE9兼容性样式
    if (Ext.isIE9m) {
      this.$nextTick(() => {
        const doms = document.getElementsByClassName('itemview-searchbar');
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          if (dom.className.indexOf('itemview-searchbar-ie9') < 0) {
            dom.classList.add('itemview-searchbar-ie9');
          }
        }
      });
    }
  },
  methods: {
    // 查询
    search() {
      const params = {
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      this.$emit('getSearchParams', params);
    },
  },
};
</script>
<style lang="scss">
.datetimerangepopover{
  z-index: 100000 !important;
}
.itemview-searchbar {
  padding: 5px 20px;
  background: #f4f7fd;
  color: #333333;
  .el-date-editor .el-range-separator {
    width: auto;
  }
  .search {
    color: #2f6bcf;
    cursor: pointer;
    margin-left: 10px;
  }
  .keyword-input {
    width: 150px;
    margin-right: 20px;
  }
  .date-input {
    width: 210px;
    padding-right: 4px;
  }
}
/* IE9 兼容性处理 */
.itemview-searchbar-ie9 {
  .date-input {
    width: 240px;
  }
  .el-input__inner {
    line-height: normal;
  }
  .el-date-editor .el-range-input {
    width: 35%;
  }
}
</style>
